<template>
  <el-card class="content small-padding-card">
    <top-label v-model="index" class="move-up">
      <span :slot="0">监测点变形分析</span>
      <span :slot="1">单点变化速率分析</span>
      <span :slot="2">累计位移分析</span>
      <span :slot="3">数据统计</span>
    </top-label>
    <single-point-analysis
      :source="node.singlePoint"
      :node="node"
      v-if="index === 0"
    ></single-point-analysis>
    <cumulative-analysis-chart
      :source="node.singlePoint"
      :node="node"
      v-if="index === 1"
    ></cumulative-analysis-chart>

    <comparison-automation
      v-if="index === 2"
      :node="node"
    ></comparison-automation>
    <data-statistics
      v-if="index === 3"
      :source="node.list"
      :node="node"
    ></data-statistics>
  </el-card>
</template>

<script>
import TopLabel from "~/components/TopLabel";
import SinglePointAnalysis from "~/views/monitor-control/statistical-analysis/interior-displacement/SinglePointAnalysis";
import DataStatistics from "~/views/monitor-control/statistical-analysis/interior-displacement/DataStatistics";
import CumulativeAnalysisChart from "~/views/monitor-control/statistical-analysis/interior-displacement/CumulativeAnalysisChart";
import ComparisonAutomation from "~/views/monitor-control/statistical-analysis/interior-displacement/ComparisonAutomation";

export default {
  name: "SurfaceDisplacement",
  components: {
    DataStatistics,
    SinglePointAnalysis,
    TopLabel,
    CumulativeAnalysisChart,
    ComparisonAutomation,
  },
  props: {
    node: Object,
  },
  data() {
    return {
      index: 0,
    };
  },
  mounted() {
    // this.index = 0;
  },
  created() {
    if (window.sessionStorage.getItem("indexin") != null) {
      this.index = Number(window.sessionStorage.getItem("indexin"));
    }
  },
  watch: {
    index: function (indexin) {
      window.sessionStorage.setItem("indexin",indexin);
      // console.log(val);
    },
  },
};
</script>

<style scoped>
.content {
  margin-left: 10px;
  padding-top: 5px;
}
.move-up {
  transform: translateY(-5px);
}
</style>
